<template>
    <div class="self-manage">
        <div class="avatar">
            <van-image 
                round
                width="10rem"
                height="10rem"
                :src="imageUrl + donator.donatorAvatar"
            />
            <h2>{{ donator.donatorUsername }}</h2>
        </div>
        <van-cell title="捐赠记录" is-link to="/donationRecords" icon="todo-list" />
        <van-cell title="个人信息" is-link to="/selfInfoManage" icon="manager" />
        <van-cell title="退出登录" @click="handleLeave" />
    </div>
    
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { imageUrl } from '../../api/request';
import { useRouter } from 'vue-router';
import { showConfirmDialog } from 'vant';

/** 捐赠者信息 */
const donator = ref({
    donatorAvatar: null,
    donatorUsername: null,
})
const router = useRouter();

onMounted(() => {
    const { donatorAvatar, donatorUsername } = JSON.parse(localStorage.getItem('donator') || '');
    donator.value.donatorAvatar = donatorAvatar;
    donator.value.donatorUsername = donatorUsername;
})

/** 退出登录 */
const handleLeave = () => {
    showConfirmDialog({
        title: '确认退出登录',
        message: '确认要退出登录吗？'
    }).then(() => {
        localStorage.removeItem('donator');
        router.push('/login');
    })
}
</script>

<style lang="less">
.self-manage {
    height: 100vh;
    width: 100vw;
    background-color: #e1ecfe69;

    .avatar {
        width: 100%;
        height: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
</style>